<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  div {
    /* 容器窗口宽度 */
    width: 240px;
    height: 178px;
    margin: 100px auto;
    border: 1px solid red;
    /* 不平铺 */
    /* 图片：宽240px*2，高178px */
    background: url(./img/两倍图.png) no-repeat;
    animation: move 2s linear infinite;
  }
  @keyframes move {
    to {
      /* 动画终态宽度 */
      background-position: -240px 0;
    }
  }
  /* 
一、停顿一下的原因
        某一个动画周期最后一帧图片与下一周期的第一帧图片不同
    解决方案
        方法a
            1、容器宽度 = 动画终态宽度
            2、background-repeat: repeat-x;
            3、background-size: 100%; 或者 background-size: cover;
        方法b
            1、图片宽度 = 动画终态宽度
            2、background-repeat: repeat-x;
            3、background-size: contain;（此条件可有有无）
        方法c
            1、制作2倍宽的新背景图
                - 两张一模一样的旧背景图，尾接头，紧紧挨着，合成新大背景图（刚好2倍宽）
                - 图片url引入的是大背景图，但容器显示窗口必须是1倍宽的尺寸大小
            2、background-repeat: no-repeat;
            3、要求三种宽度一致
                容器宽度 = 动画终态宽度 = 图片1倍宽度
            4、轮播图就是这个原理：后面接着第一张，前面接着最后一张
二、易错点
    background-position: -240px 0;      移动的是背景图
    transform: translateX(-240px);      移动的是元素自身，即容器显示窗口
  */
</style>

<div></div>
